<template>
    <div ref="messageRef" :class="[{'flex-row-reverse':inversion}]" class="flex w-full overflow-hidden">
        <div :class="[inversion ? 'ml-2' : 'mr-2']"
            class="flex items-center justify-center bg-gray-200 flex-shrink-0 h-8 overflow-hidden rounded-full basis--8">
            <SvgIcon v-if="inversion" :name="'solar:user-broken'" :iconify="true"/>
            <SvgIcon v-else :name="'mingcute:ai-line'" :iconify="true"/>
        </div>
        <div :class="[inversion ? 'items-end' : 'items-start']" class="overflow-hidden text-sm">
            <p :class="[inversion? 'text-right':'text-left']" class="text-xs text-[#b4bbc4]">
                {{ createTime }}
            </p>
            <div :class="[inversion? 'flex-row-reverse':'flex-row']"
                class="flex items-end gap-1 mt-2 transition-all">
                <TextComponent
                    ref="textRef"
                    :text="text"
                    :asRawText="asRawText"
                    :error="error"
                    :loading="loading"
                    :inversion="inversion"/>
                <div class="flex flex-col transition-all w-[45px]">
                    <el-space v-if="isHover" class="transition-all gap-1.5 flex-nowrap justify-end">
                        <el-popover v-for="item in options" :key="item" popper-class="custom-popover">
                            <template #reference>
                                <el-button @click="handlerSelect(item.key)"
                                    class="transition text-neutral-400 hover:text-neutral-800">
                                    <component :is="item.icon"/>
                                </el-button>
                            </template>
                            {{item.label}}
                        </el-popover>
                    </el-space>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import {useMessage,useMessageBox} from "/@/hooks/message";
    import {copyToClipboard} from "/@/utils/copy";
    import {useIconRender} from '/@/components/SvgIcon/IconRender';
    import TextComponent from './TextComponent.vue';

    interface MessageOption{
        label:string;
        key:'copyText' |'delete' |'toggleRenderType';
        icon:any;
    }
    // 组件参数定义
    const props = defineProps({
        createTime:  {
          type:String,
          default:''
        },
        text: {
          type:String,
          default:false
        },
        inversion: {
          type:Boolean,
          default:false
        },
        error: {
          type:Boolean,
          default:false
        },
        loading: {
          type:Boolean,
          default:false
        },
    });

    // 组件方法定义
    const emit=defineEmits(['delete']);

    const isHover=ref(false);
    const textRef=ref<HTMLElement>();
    const asRawText=ref(props.inversion);
    const {iconRender}=useIconRender();

    const copyIcon = iconRender({ icon: 'ri:file-copy-2-line' })
    const codeIcon = iconRender({ icon: 'ic:outline-code' })
    const codeOffIcon = iconRender({ icon: 'ic:outline-code-off' })
    // 鼠标悬浮事件
    const options=computed<MessageOption[]>(()=>{
        const common:MessageOption[]=[{label:"t('chat.copy')",key:"copyText",icon:copyIcon}];
        if(!props.inversion){
            common.push({label:asRawText.value?"t('chat.preview')":"t('chat.display')",key:"toggleRenderType",icon:iasRawText.value ? codeOffIcon : codeIcon});
        }
        return common;
    });

    const handlerSelect=(key: string)=>{
        switch(key){
            case 'copyText':{
                handelCopy();
                break;
            }
            case 'delete':{
                emit('delete');
                break;
            }
            case 'toggleRenderType':{
                asRawText.value=!asRawText.value;
                break;
            }
        }
    }

    const handelCopy=()=>{
        try{
            const text=props.text|'';
            copyToClipboard(text);
            useMessage().error('t("chat.copySuccess")');
        }catch(err){
            useMessage().error('t("chat.copyFailed")');
        }
    }
</script>
